﻿/* */
/* CeJS 網路小說漫畫下載工具 GUI CSS */
body {
	color: #008;
	background-color: #efe;
}

body.dark {
	color: #999;
	background-color: #222;
}

.dark a {
	color: #ccc;
}

.dark input {
	color: #aaa;
	background-color: #111;
}

/* using 20px is good */
img[class="inline"] {
	vertical-align: bottom;
}

h3 {
	color: #648;
	margin: 0;
}

kbd {
	color: #333;
	border: 1px solid #aaa;
	border-radius: 2px;
	box-shadow: 1px 2px 2px #ddd;
	background-color: #eee;
	padding: 1px 3px;
	font-size: 0.85em;
	white-space: nowrap;
}

dt {
	font-weight: bold;
}

.dark textarea {
	color: #999;
	background-color: #000;
}

/* https://www.bestcssbuttongenerator.com/ */
.button {
	box-shadow: inset 0px 1px 0px 0px #def;
	background: linear-gradient(to bottom, #bdf 5%, #8be 100%);
	background-color: #bdf;
	color: #fff;
	border-radius: .3em;
	border: 1px solid #8be;
	display: inline-block;
	cursor: pointer;
	padding: .1em .5em;
	text-decoration: none;
	text-shadow: 0px 1px 0px #58c;
}

.dark .button {
	box-shadow: none;
	background: none;
	background-color: #000;
	color: #aaa;
	text-shadow: none;
}

.click_item {
	text-indent: -1em;
	padding-left: 1.2em;
	/*margin-bottom: .3em;*/
	border-bottom: dotted green 1px;
}

/* 🔗連結 */
.click_item a {
	font-size: .7em;
	white-space: nowrap;
}

.site_type_label {
	background-color: #ffd;
	border: 1px solid #eec;
	margin: 1px;
	text-align: left !important;
}

#right_panel {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

#finished_sound {
	display: none;
}

/* ------------------------------------------- */
.trigger {
	cursor: pointer;
	text-align: center;
	border-radius: .5em;
	padding-left: .5em;
	padding-right: .5em;
}

.trigger:hover {
	background-color: #888;
}

.trigger_icon {
	float: right;
}

.panel {
	color: #11a;
	display: inline-block;
	vertical-align: top;
	margin: .3em;
	margin-top: 0;
	padding: .3em;
	border: solid 1pt #abc;
	border-radius: .3em;
	padding: .3em;
}

.dark .panel {
	color: #aaa;
}

#download_sites_panel {
	background-color: #cfe;
}

.dark #download_sites_panel {
	background-color: #111;
}

#download_sites_trigger {
	background-color: #bed;
}

.download_sites {
	cursor: pointer;
	background-color: #eee;
}

.download_sites.selected {
	background-color: #fbc;
}

.dark #download_sites_trigger {
	color: #aac;
}

.dark #download_sites_trigger, .dark .download_sites, .dark .site_type_label
	{
	background-color: #222;
}

.dark .download_sites.selected {
	color: #ada;
	background-color: #000;
}

/* ------------------------------------------- */
.disabled {
	color: #888;
}

/* ------------------------------------------- */
#language_menu {
	float: right;
	clear: right;
}

#language_menu {
	font-size: .8em;
	background-color: #fef;
	border: 1px solid #faa;
	border-radius: .2em;
	padding: .2em;
}

#language_menu select, #language_menu option {
	color: #44f;
	background-color: #ddf;
}

/* ------------------------------------------- */
#favorites_panel {
	flex-grow: 0;
	background-color: #eef;
	border: 1px solid #ccd;
	border-radius: .5em;
	padding: .5em;
	margin-bottom: .5em;
	display: none;
}

#favorites_box {
	width: 99%;
	height: 20em;
}

.dark #download_options_panel, .dark #favorites_panel {
	background-color: #111;
}

/* https://stackoverflow.com/questions/42613350/how-can-i-create-multi-columns-from-a-single-unordered-list */
.favorite_ol {
	/*column-count: 6;*/
	margin: 0;
	margin-left: -2em;
}

/*
#favorite_list {
	height: 30em;
	overflow-y: scroll;
}
*/
#favorite_list li {
	border-bottom: 1px dotted #ccc;
	height: auto;
	line-height: 1.5em;
	margin-left: 2em;
	line-height: 1.5em;
}

/* https://www.bestcssbuttongenerator.com/ */
.favorites_button {
	box-shadow: inset 0px 1px 0px 0px #bef;
	background: linear-gradient(to bottom, #bde 5%, #48c 100%);
	background-color: #bde;
	border-radius: .3em;
	border: 1px solid #36b;
	display: inline-block;
	cursor: pointer;
	color: #14396a;
	text-decoration: none;
	text-shadow: 0px 1px 0px #7ad;
	font-size: .9em;
	padding: .2em .5em;
	margin-left: .5em;
	margin-top: .5em;
	/* 不可設定 height 為固定值，否則在分行時，會無法覆蓋到第二行。 */
}

.favorites_button kbd {
	font-size: 1em;
	font-weight: normal;
	text-shadow: none;
}

.favorites_button.cancel {
	color: red;
}

/* ------------------------------------------- */

/* notice */
#attention_panel {
	display: none;
	color: #f02;
	background-color: #ff0;
	border: double #f00 3px;
	border-radius: 1em;
	padding: .5em;
	font-size: 1.5em;
}

#attention_panel a {
	/* for .dark a {} */
	color: #22f;
}

#close_attention_panel_button {
	float: right;
	cursor: pointer;
}

#close_attention_panel_button:hover {
	color: #00f;
}

#operation_panel {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

/* ------------------------------------------- */
#download_options_panel {
	background-color: #efc;
	flex-grow: 0;
	display: none;
}

.download_options {
	cursor: pointer;
	/* text-decoration: line-through; */
	background-color: #ddd;
}

.dark .download_options {
	color: #888;
	background-color: #000;
}

.download_options.selected {
	text-decoration: none;
	background-color: #eef;
}

.dark .download_options.selected {
	color: #ddd;
	background-color: #444;
}

#download_options_panel .button {
	margin: .5em;
}

#download_options_panel .button.not_set {
	color: #444;
	background: linear-gradient(to bottom, #888 5%, #aaa 100%);
}

/* ------------------------------------------- */
#search_results_panel {
	background-color: #ffe;
	display: none;
}

.dark #search_results_panel {
	background-color: #111;
}

#searching_process {
	color: #a82;
	font-weight: bold;
}

#search_results .button {
	margin: .5em;
}

/* https://divtable.com/table-styler/ */
table {
	border: 1pt solid #575;
	border-radius: .5em;
	/* https://codepen.io/machal/pen/jpdFm */
	/* https://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i */
	overflow: hidden;
	border-collapse: collapse;
	background-color: #eee;
	margin: 1em;
}

th {
	color: #fff;
	background-color: #686;
	text-align: center;
	font-weight: bold;
}

td, th {
	border: 1px solid #575;
}

td {
	color: #485;
}

tr:nth-child(even) {
	background-color: #cec;
}

.dark table, .dark th, .dark tr {
	background-color: #333;
}

.dark tr:nth-child(even) {
	background-color: #111;
}

#search_results .download_searched {
	cursor: pointer;
}

#search_results .download_searched:hover {
	background-color: #fac;
}

#search_results .different {
	color: #a24;
	font-weight: bold;
}

#search_results .not_found_site {
	display: inline-block;
	white-space: nowrap;
	border-radius: .3em;
	margin: .1em .2em;
	padding: 0 .5em;
	background-color: #fcd;
}

/* ------------------------------------------- */
.download_sites:hover, .download_options:hover {
	background-color: #ff7;
}

.dark .download_options:hover {
	background-color: #03a;
}

.download_sites:before {
	content: "⬚ ";
}

.download_sites.old_Unicode_support:before {
	content: "☐ ";
}

.download_sites.selected:before {
	content: "☑ ";
}

.download_options:before {
	content: "✗ ";
}

.download_options.non_select:before {
	content: "　 ";
}

.download_options.non_select, .dark .download_options.non_select {
	cursor: auto;
	background-color: transparent;
}

.download_options.selected:before {
	content: "✓ ";
}

.download_options input {
	color: #00f;
	background-color: #ffc;
}

.dark .download_options input {
	color: #99c;
	background-color: #000;
}

.download_options input.type_number {
	width: 4em;
}

/* ------------------------------------------- */
#update_panel {
	padding: .2em;
	border: solid 1px #f00;
	border-radius: .2em;
	float: right;
	max-width: 16em;
}

#update_panel .waiting {
	cursor: wait;
}

#update_panel.check_failed {
	color: #f88;
	background-color: #ff0;
}

/* ------------------------------------------- */
#download_job_panel {
	background-color: #fef;
	display: none;
}

.dark #download_job_panel {
	background-color: #000;
}

/* ------------------------------------------- */
.download_work_layer {
	display: flex;
	flex-direction: row;
	background-color: #dbe;
	padding: .2em;
	margin-top: .3em;
	border-radius: .2em;
}

.dark .download_work_layer {
	background-color: #222;
}

/* https://www.bestcssbuttongenerator.com/ */
.task_controller {
	color: #fff;
	box-shadow: 0px 0px 0px 2px #9ae;
	background: linear-gradient(to bottom, #78b 5%, #469 100%);
	background-color: #78b;
	border-radius: .5em;
	border: 1px solid #569;
	cursor: pointer;
	font-size: .7em;
	padding: .2em .5em;
	margin-left: .5em;
	height: 1.5em;
}

.progress_layer {
	text-align: center;
	width: 0;
	background-color: #8e8;
	white-space: nowrap;
}

.dark .progress_layer {
	color: #11a;
}

.progress_layer .error {
	color: red;
	background-color: #fd0;
	padding-left: .5em;
	padding-right: .5em;
}

.task_label {
	width: 13em;
	color: #27f;
	white-space: nowrap;
}

.task_label .site_label {
	max-width: 5em;
	/* 網站標籤占比太大會看不到作品名稱 */
	font-size: .8em;
	color: #56f;
	margin-right: .2em;
}

/* ------------------------------------------- */
#small_tips {
	color: #f88;
}

/* ------------------------------------------- */
#select_theme_panel {
	margin-left: 1em;
	display: inline-block;
}

#select_theme_panel .light, #select_theme_panel .dark {
	margin-left: .5em;
	cursor: pointer;
	padding: .2em;
	border-radius: .2em;
	/* .dark */
	color: #999;
	background-color: #222;
}

#select_theme_panel .light {
	color: #55d;
	background-color: #fff;
}

#select_theme_panel .button.selected:before {
	color: #ff8;
	content: "✓ ";
}